import {useMemo, useRef} from 'react';
import {Canvas} from '@react-three/fiber';
import {Physics} from '@react-three/rapier';
import {Stats} from '@react-three/drei';
import {CameraControls, KeyboardControls} from '@react-three/drei';
import Level from './Level.jsx';
import Player from './Player.jsx';
import Lights from './lights/Lights.jsx';

function Experience() {

  const map = useMemo(()=>[
    { name: 'forward', keys: ['ArrowUp', 'KeyW'] },
    { name: 'back', keys: ['ArrowDown', 'KeyS'] },
    { name: 'left', keys: ['ArrowLeft', 'KeyA'] },
    { name: 'right', keys: ['ArrowRight', 'KeyD'] },
    { name: 'jump', keys: ['Space'] },
  ], [])


  return (
    <KeyboardControls
      map={map}
    >
      <Canvas camera={{position: [0, 10, 10], fov: 75}} args={{color: '#fff'}} shadows>
        <CameraControls/>
        <Lights/>
        <Physics debug={false}>
          <Level count={5}/>
          <Player/>
        </Physics>
        {/* <axesHelper/> */}
        <Stats/>
      </Canvas>
    </KeyboardControls>
  );
}

export default Experience;
